import React, { Component } from 'react'
import axios from "axios"
import "./GetList.scss"
// import IScroll from "iscroll"

class GetList extends Component {
  state = {
    activeTab:"overall",
    good:[]
  }
  // iscroll = React.createRef()
 componentDidMount(){
    axios.get("./json1.json").then(res=>{
        this.setState({
            good:res.data
        })
        console.log(res);
    })
    // console.log(good)
    // this.myIscroll=new IScroll(this.iscroll.current,{
    //   mouseWheel: true,
    //   scrollbars: true,
    //   bounce:true,
    //   probeType:3,
    //   tap:true,
    //   click:true,
    //   scrollX:true,
    // })
}
  handleTabClick = (e)=>{
    let activeTab = e.target.dataset["tab"]
    this.setState(()=>{
      return {
        activeTab:activeTab
      }
    })
  }
  godetail = () => {
    this.props.history.push('/gooddetails')
  }
  render() {
    // console.log(this.iscroll)
    return (
      <div className="producrListtotal">
        {/* tabbar 开始  事件委托的方式处理点击事件的*/}
        <div className="productListTabs" onClick={this.handleTabClick}>
          <div style={{fontSize:"18px"}}
            data-tab="overall"
            className={
              this.state.activeTab === "overall"
                ? "tabsItem active"
                : "tabsItem"
            }
          >
            全部
          </div>
          <div style={{fontSize:"18px"}}
            data-tab="man"
            className={
              this.state.activeTab === "man" ? "tabsItem active" : "tabsItem"
            }
          >
            成人
          </div>
          <div style={{fontSize:"18px"}}
            data-tab="oldman"
            className={
              this.state.activeTab === "oldman" ? "tabsItem active" : "tabsItem"
            }
          >
            老人
          </div>
          <div style={{fontSize:"18px"}}
            data-tab="child"
            className={
              this.state.activeTab === "child" ? "tabsItem active" : "tabsItem"
            }
          >
            少儿
          </div>
          <div style={{fontSize:"18px"}}
            data-tab="shopping"
            className={
              this.state.activeTab === "shopping" ? "tabsItem active" : "tabsItem"
            }
          >
            精选商城
          </div>
        </div>
        <div className="tabItemContent">
          
          <div className={this.state.activeTab === "overall" ? "" : "hidden"}>
            <div ref={this.iscroll}>
           {this.state.good.map((v)=>{
               return(
                   <div className="tablistitem" key={v.id} onClick={this.godetail}>
                       <div className="tablistitemleft">
                           <img src={v.imgList} alt=""/>
                       </div>
                       <div className="tablistitemright">
                        <span>{v.title}</span>
                        <span>{v.item}</span>
                        <span>{v.price}</span>
                       </div>
                   </div>
               )
           })}
           </div>
          </div>
          <div className={this.state.activeTab === "man" ? "" : "hidden"}>
          <div >
           {this.state.good.map((v)=>{
               return(
                   <div className="tablistitem" key={v.id}>
                       <div className="tablistitemleft">
                           <img src={v.imgList} alt=""/>
                       </div>
                       <div className="tablistitemright">
                        <span>{v.title}</span>
                        <span>{v.item}</span>
                        <span>{v.price}</span>
                       </div>
                   </div>
               )
           })}
           </div>
          </div>
          <div className={this.state.activeTab === "oldman" ? "" : "hidden"}>
          <div >
           {this.state.good.map((v)=>{
               return(
                   <div className="tablistitem" key={v.id}>
                       <div className="tablistitemleft">
                           <img src={v.imgList} alt=""/>
                       </div>
                       <div className="tablistitemright">
                        <span>{v.title}</span>
                        <span>{v.item}</span>
                        <span>{v.price}</span>
                       </div>
                   </div>
               )
           })}
           </div>
          </div>
          <div className={this.state.activeTab === "child" ? "" : "hidden"}>
          <div >
           {this.state.good.map((v)=>{
               return(
                   <div className="tablistitem" key={v.id}>
                       <div className="tablistitemleft">
                           <img src={v.imgList} alt=""/>
                       </div>
                       <div className="tablistitemright">
                        <span>{v.title}</span>
                        <span>{v.item}</span>
                        <span>{v.price}</span>
                       </div>
                   </div>
               )
           })}
           </div>
          </div>
          <div className={this.state.activeTab === "shopping" ? "" : "hidden"}>
          <div >
           {this.state.good.map((v)=>{
               return(
                   <div className="tablistitem" key={v.id}>
                       <div className="tablistitemleft">
                           <img src={v.imgList} alt=""/>
                       </div>
                       <div className="tablistitemright">
                        <span>{v.title}</span>
                        <span>{v.item}</span>
                        <span>{v.price}</span>
                       </div>
                   </div>
               )
           })}
           </div>
          </div>
        </div>
        {/* tabbar 结束 */}
      </div>
    )
  }
}
export default GetList;
